<template>
  <div class="w_h_100 product">
    <div class="box">
      <div class="inlet">系统管理 > <span class="size">产品管理</span></div>
      <myform :fields="fields" :model="values" class="m_t_10" :options="options">
        <template v-slot:button>
          <el-button @click="resetting">重置</el-button>
          <el-button type="primary" :icon="Search" @click="searchFor">搜索</el-button>
        </template>
      </myform>
    </div>
    <div class="mytable m_t_10 ">
      <div class="d_f j_c_s_b a_i_c">
        <h4>产品明细列表</h4>
        <div>
          <el-button :icon="DeleteFilled" @click="recycleBin" v-hasPerm="'recycleProduct'">产品回收站</el-button>
          <el-button type="primary" :icon="Plus" @click="addProduct" v-hasPerm="'addProduct'">新建产品</el-button>
        </div>
      </div>
      <mytable :fields="tableFields" width="150" ref="tableRef" :values="values" api="productListByPage" class="m_t_10"
        :isSelection="false">
        <template v-slot:category="{ row }">
          <span v-if="row.category == 1">融资单笔</span>
          <span v-if="row.category == 2">融资批量</span>
          <span v-if="row.category == 3">非融单笔</span>
          <span v-if="row.category == 4">非融批量</span>
        </template>
        <template v-slot:status="{ row }">
          <el-switch v-model="row.status" @change="changeSwitch(row.id, row.status)" inline-prompt active-text="开"
            inactive-text="关" class="ml-2" :active-value="1" :inactive-value="2"
            style="--el-switch-on-color:#13ce66; " />
        </template>
        <template v-slot:operation="{ row }">
          <div class="d_f j_c_s_b">
            <span class="edit" @click="edit(row)" v-hasPerm="'editProduct'">编辑</span>
            <span class="edit" @click="productCopy(row)" v-hasPerm="'copyProduct'">复制</span>
            <span class="edit" @click="productLog(row)">日志</span>
            <span class="error" @click="deleteOut(row)" v-hasPerm="'deleteProduct'">删除</span>
          </div>
        </template>
      </mytable>
    </div>
    <el-drawer v-model="show" :title="title" size="500px" direction="rtl" :before-close="handleClose">
      <div class="product_form">
        <myform :fields="addFields" ref="ruleFrom" :options="options" :model="model" :inline="false" labelPosition="top"
          :rules="rules" class="m_t_16"></myform>
      </div>
      <div class="d_f j_c_c">
        <el-button type="primary" @click="save" v-myRepeat>保存</el-button>
        <el-button @click="handleClose">取消</el-button>
      </div>
    </el-drawer>
    <el-dialog
    v-model="copyShow"
    :title="copyTitle"
    width="400"
    :before-close="handleCloseCopy"
  >
   <div class="d_f a_i_c f_d_c">
    <img src="../../../assets/product.png" alt="" class="img">
    <div class="size">请输入新产品名称</div>
    <el-input v-model="model.name" placeholder="请输入" class="m_t_16"></el-input>
   </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCloseCopy">取消</el-button>
        <el-button type="primary" @click="submit">
          复制
        </el-button>
      </div>
    </template>
  </el-dialog>
  <log :values="logValues" @logHandleClose="logHandleClose" ref="logRef"></log>
  </div>
</template>

<script lang='ts'>
import { defineComponent, reactive, toRefs, onBeforeMount, ref } from 'vue'
import { productType } from '../../../type/system'
import { Search, Plus,DeleteFilled} from '@element-plus/icons-vue'
import { copy, objectMatching } from '../../../utils/date'
import { Message } from '../../../utils/resetMessage'
import { ElMessageBox } from 'element-plus'
import {productAdd,productUpdate,productDel,productStatus,flowList} from '../../../api/system/product'
import { useRouter } from 'vue-router'
import log from '../../../components/dialog/log.vue'
const values = {
  name: '',
  category: '',
  status: '',//状态：1-启用，2-禁用
}
const model={
  id:0,
  name:'',//产品名称
  category:'',//产品类型
  flowId:'',//流程ID
  status:0//状态：0-启用，1-禁用
}
export default defineComponent({
  name: '',
  components:{
    log
  },
  setup() {
    const data: productType = reactive({
      fields: [
        {
          label: "产品名称",
          prop: 'name',
          placeholder: '请输入产品名称',
          type: 'input',
          labelWidth: '70px'
        },
        {
          label: "产品类型",
          prop: 'category',
          placeholder: '请选择产品类型',
          type: 'select',
          bindLabel: 'name',
          bindValue: 'id',
        },
        {
          label: "产品状态",
          prop: 'status',
          placeholder: '请选择产品状态',
          type: 'select',
          bindLabel: 'name',
          bindValue: 'id',
        },
        {
          prop: 'button'
        }
      ],
      values: copy(values),
      options: {
        category: [
          {
            name: '融资单笔',
            id: 1,
          },
          {
            name: '融资批量',
            id: 2,
          },
          {
            name: '非融单笔',
            id: 3,
          },
          {
            name: '非融批量',
            id: 4,
          },
        ],
        status: [
          {
            name: '启用',
            id: '1',
          },
          {
            name: '停用',
            id: '2',
          },
        ],
        flowId:[],
      },
      tableFields: [
        {
          label: '产品名称',
          prop: 'name',
        },
        {
          label: '产品类型',
          prop: 'category',
        },
        {
          label: '创建人',
          prop: 'createdName',
        },
        {
          label: '创建时间',
          prop: 'createdTime',
        },
        {
          label: '产品状态',
          prop: 'status',
        },
      ],
      show: false,
      title: '新建产品',
      addFields: [
        {
          label: '产品名称',
          type: 'input',
          placeholder: '请输入',
          prop: 'name'
        },
        {
          label: "产品类型",
          prop: 'category',
          placeholder: '请选择产品类型',
          type: 'select',
          bindLabel: 'name',
          bindValue: 'id',
        },
        {
          label: "流程",
          prop: 'flowId',
          placeholder: '请选择流程',
          type: 'select',
          bindLabel: 'name',
          bindValue: 'id',
        },
      ],
      model:copy(model),
      rules:{
        name: [
          { required: true, message: '请输入产品名称', trigger: 'blur' },
        ],
        category: [
          { required: true, message: '请选择产品类型', trigger: 'blur' },
        ],
        flowId: [
          { required: true, message: '请选择流程', trigger: 'blur' },
        ],
      },
      copyShow:false,
      copyTitle:'',
      logValues:{
        bizId:'',
        category:'1',
        
      }
    })
    const tableRef = ref()
    const ruleFrom=ref()
    const router =useRouter()
    const logRef=ref()
    onBeforeMount(() => {
      methods.getData()
    })
    const methods = {
      //获取流程列表
      getData(){
        flowList({}).then((res:any)=>{
           data.options.flowId=res
        })
      },
      //表格数据重置
      resetting() {
        data.values = copy(values)
        tableRef.value.resettingTable(data.values)
      },
      //列表根据筛选条件搜索
      searchFor() {
        tableRef.value.handleCurrentChange(1)
      },
      changeSwitch(id: string | number, status: string | number) {
        if (!id) return
        productStatus({ id: id, status: status }).then(() => {
                    Message({ type: 'success', message: '操作成功' })
                })
      },
      addProduct() {
        data.title = '新建产品'
        data.show = true
      },
       //关闭弹窗
       handleClose() {
        ElMessageBox.confirm(
          '当前信息将不再保存?',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
        )
          .then(() => {
            ruleFrom.value.resetFields()//重置表单
            data.show = false
            data.model = copy(model)
          })
      },
      //新增产品跟修改产品按钮点击事件
      save(){
        ruleFrom.value.verification().then(()=>{
          if(!data.model.id){
            productAdd(data.model).then(()=>{
              Message({type:'success',message:'添加成功'})
              tableRef.value.handleCurrentChange(1)//添加表格之后重新获取表格
              data.show=false//关闭弹窗
              ruleFrom.value.resetFields()//重置表单
              data.model=copy(model)//重置表单绑定数据
            })
          }else{
            productUpdate(data.model).then(()=>{
              Message({type:'success',message:'修改成功'})
              tableRef.value.handleCurrentChange(1)//添加表格之后重新获取表格
              data.show=false//关闭弹窗
              ruleFrom.value.resetFields()//重置表单
              data.model=copy(model)//重置表单绑定数据
            })
          }
        })
      },
      //删除当前产品进入回收站
      deleteOut(row:any){
        let val=`确认删除”${row.name}“`
          ElMessageBox.confirm(
            val,
            '提示',
            {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'error',
            }
          )
            .then(() => {
              productDel({id:row.id}).then((res:any)=>{
                Message({type:'success',message:'删除成功'})
                tableRef.value.handleCurrentChange(1)//添加表格之后重新获取表格
              })
            })
        },
        edit(row:any){
         data.model=objectMatching(row,data.model)
         data.title='编辑产品'
         data.show=true
        },
        productCopy(row:any){
          data.copyTitle=`复制“${row.name}”`
          data.model=objectMatching(row,data.model)
          data.model.name=''
          data.copyShow=true
        },
        //关闭复制弹窗
        handleCloseCopy(){
          data.model=copy(model)
          data.copyShow=false
        },
        //复制产品按钮回调
        submit(){
          if(!data.model.name){
          Message({type:'error',message:'请输入新产品名称'})
          return
          }
          productAdd(data.model).then((res:any)=>{
              Message({type:'success',message:'添加成功'})
              tableRef.value.handleCurrentChange(1)//添加表格之后重新获取表格
              data.copyShow=false//关闭弹窗
              data.model=copy(model)//重置表单绑定数据
            })
        },
        //跳转到产品回收站
        recycleBin(){
         router.push('/system/product/recycleBin')
        },
        //查看操作日志
        productLog(row:any){
           data.logValues.bizId=row.id
           logRef.value.getData()
        },
        //关闭日志弹窗并清除业务id
        logHandleClose(){
          data.logValues.bizId=''
        }
    }
    return {
      ...toRefs(data),
      Search, Plus,DeleteFilled,
      ...methods, tableRef,
      ruleFrom,logRef
    }
  }
})
</script>
<style scoped lang='scss'>
.box {
  width: calc(100% - 64px);
  background: #fff;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  height: 70px;
  padding: 10px 32px;
  margin-top: 10px;
}

.mytable {
  overflow-y: auto;
  width: calc(100% - 64px);
  background: #fff;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  padding: 10px 32px;
  height: calc(100% - 160px);
}
.img{
  background-size: 100% 100%;
  width: 150px;
}
.size{
  margin-top: 32px;
  color: rgba(0, 0, 0, 0.9)
}
</style>
<style lang="scss">
.product{
 
  .f_d_c{
    .el-input{
      width: 95% !important;
    }
  }
}
.product_form{
  height: calc(100% - 70px);
  overflow-y: auto;
  .el-input,.el-select{
    width: 100% !important;
  }
}
</style>